<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>订单列表</span>
      </div>
    </template>
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column prop="id" label="订单ID" width="180" />
      <el-table-column prop="id" label="用户信息">
        <template #default="scope">
          <div>
            <div class="name">用户名：{{ scope.row.user.username }}</div>
            <div class="name">手机号：{{ scope.row.user.phone }}</div>
            <div class="name">
              身份：{{ scope.row.user.sta === 0 ? "管理员" : "普通用户" }}
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="movie" label="电影信息">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <img
              style="width: 50px; height: 50px; border-radius: 5px"
              :src="scope.row.movie.imgUrl"
            />
            {{ scope.row.movie.title }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="event" label="场次信息">
        <template #default="scope">
          <div>
            <div>票价：{{ scope.row.event.fare }}</div>
            <div>放映时间：{{ Time(scope.row.event.show_time) }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="Selseat" label="所选座位号" />
    </el-table>
  </el-card>
</template>
<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, onMounted, reactive } from "vue";
import { Try, Time } from "@/utils";
import { getOrder } from "@/api";
const tableData = ref([]);
function getlist() {
  Try(async () => {
    const res = await getOrder();
    console.log(res);
    if (res.code === 200) {
      tableData.value = res.data;
    }
  });
}
onMounted(() => {
  getlist();
});
</script>
<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
